<script setup>
  import { ref, onMounted, onUnmounted } from 'vue'
  import { useStore } from '@/store/index.js';
  import { useStyleStore }  from "@/store/styleStore.js";
  import { ElMessage } from 'element-plus'
  import {EditPen, List, MagicStick, Message, Phone, Position} from "@element-plus/icons-vue";
  import DateUtil from "@/utils/DateUtil.js";
  import router from "@/router/index.js";

  const store = useStore();
  const styleStore = useStyleStore();

  onMounted(() => {

  })

  const openUrl = (url) => {
    window.open(url)
  }

  const toSetting = () => {
    router.replace('/setting');
  }

  const copyText = (text) => {
    navigator.clipboard.writeText(text);
    ElMessage({
      message: '已复制本站地址！',
      type: 'success',
    })
  }

  const dynamicData = ref({
    isEdit: false,
  })

  const close = () => {
    // 取消置顶显示
    styleStore.userInfo.method.cancelTop();
  }

</script>
<template>

  <!-- 用户详情组件最外层盒子 -->
  <div :class="['user-info-basic', styleStore.userInfo.top ? 'animationShowStyle':'']" v-if="styleStore.userInfo.top">

    <!-- 头部部分 -->
    <div class="user-info-header">
        <div class="user-info-header-title">用户中心</div>
        <div class="user-info-header-close-btn" @click="close">
          <el-icon>
            <Close />
          </el-icon>
        </div>
      </div>

    <!-- 用户详情内容与logo大图浮动处理盒子 -->
    <div class="content-logo-float-basic">

      <!-- 内容部分 -->
      <div class="user-info-content-basic">

        <!-- 用户详情内容头像最外层盒子 -->
        <div class="user-info-content-avatar">

          <!-- 用户详情内容文字头像 -->
          <div class="user-info-content-avatar-text" v-if="store.user.info.avatar === ''">
            {{ store.user.info.nickName.substring(store.user.info.nickName.length - 2, store.user.info.nickName.length) }}
          </div>

          <!-- 用户详情内容图片头像样式 -->
          <div class="user-info-content-avatar-image" v-if="store.user.info.avatar !== ''">
            <img :src="store.user.info.avatar" alt="用户头像" />
          </div>

          <!-- 用户详情内容昵称最外层盒子 -->
          <div class="user-info-content-nickname">

            <!-- 用户详情内容昵称文字 -->
            <div class="user-info-content-nickname-text" v-if="!dynamicData.isEdit">{{ store.user.info.nickName }}</div>

            <!-- 用户详情内容用户id -->
            <div class="user-info-content-nickname-id">No.{{ store.user.info.id }}</div>

          </div>
        </div>

        <!-- 个人信息部分 -->
        <div class="user-info-body-basic">

          <div class="user-info-body-item-basic">
            <div class="user-info-body-item-icon">
              <el-icon>
                <Phone />
              </el-icon>
            </div>
            <div class="user-info-body-item-title">手机号码：</div>
            <div class="user-info-body-item-content" v-if="store.user.info.mobile !== ''">{{ store.user.info.mobile }}</div>
            <div class="user-info-body-item-content-null" v-if="store.user.info.mobile === ''">
              尚未设置，<router-link to="/login">前往编辑</router-link>
            </div>
          </div>

          <div class="user-info-body-item-basic">
            <div class="user-info-body-item-icon">
              <el-icon>
                <Message />
              </el-icon>
            </div>
            <div class="user-info-body-item-title">邮箱号码：</div>
            <div class="user-info-body-item-content" v-if="store.user.info.email !== ''" >{{ store.user.info.email }}</div>
            <div class="user-info-body-item-content-null" v-if="store.user.info.email === ''">
              尚未设置，<router-link to="/login">前往编辑</router-link>
            </div>
          </div>

          <!-- 收藏数量 -->
          <div class="user-info-body-item-basic">
            <div class="user-info-body-item-icon">
              <el-icon>
                <List />
              </el-icon>
            </div>
            <div class="user-info-body-item-title">收藏数量：</div>
            <div class="user-info-body-item-content" v-if="store.user.info.collectCount > 0">{{ store.user.info.collectCount }} 个</div>
            <div class="user-info-body-item-content-null" v-if="store.user.info.collectCount === 0">
              暂无任何收藏，<router-link to="/login">前往收藏</router-link>
            </div>
            <!--<div class="user-info-body-item-content">{{ store.user.info.registerTime }}</div>-->
          </div>


          <div class="user-info-body-item-basic">
            <div class="user-info-body-item-icon">
              <el-icon>
                <Timer />
              </el-icon>
            </div>
            <div class="user-info-body-item-title">注册时间：</div>
            <div class="user-info-body-item-content">{{ DateUtil.formatDateTime(store.user.info.registerTime) }}</div>
          </div>

          <!--<div class="user-info-body-item-basic">-->
          <!--  <div class="user-info-body-item-icon">-->
          <!--    <el-icon>-->
          <!--      <Link />-->
          <!--    </el-icon>-->
          <!--  </div>-->
          <!--  <div class="user-info-body-item-title">开源地址：</div>-->
          <!--  <div class="user-info-body-item-content user-info-body-item-text-link"-->
          <!--       @click="openUrl('https://gitee.com/biscuitOnly')">https://gitee.com/biscuitOnly</div>-->
          <!--</div>-->

          <!-- 用户详情内容-分享本站 -->
          <div class="user-info-body-item-basic user-info-body-share">
            <div class="user-info-body-item-icon">
              <el-icon>
                <Position />
              </el-icon>
            </div>
            <div class="user-info-body-item-title">分享本站：</div>
            <div class="user-info-body-item-content user-info-body-item-text-link"
                 @click="copyText('http://127.0.0.1:5173/tagPage')">复制本站地址</div>
          </div>

          <!-- 用户详情内容-修改用户信息 -->
          <div class="user-info-body-item-basic user-info-body-share">
            <div class="user-info-body-item-icon">
              <el-icon>
                <EditPen />
              </el-icon>
            </div>
            <div class="user-info-body-item-title">用户信息：</div>
            <div class="user-info-body-item-content user-info-body-item-text-link"
                 @click="toSetting()">去编辑基本信息</div>
          </div>

        </div>

      </div>

      <!-- logo部分 -->
      <div class="user-info-logo-basic">
        <img src="http://120.46.171.159:9000/biscuit-tag-page/public/logo.jpg" alt="">
      </div>

    </div>


  </div>
</template>
<style scoped>

  /* 用户详情组件最外层盒子基本样式 */
  .user-info-basic {
    width: 800px;
    background-color: white;
    position: absolute;
    top: calc(50% - 200px);
    left: calc(50% - 400px);
    padding: 0 15px;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 10px 5px rgba(38, 38, 38, .4);
  }

  /* 用户详情头部盒子样式 */
  .user-info-header {
    width: 100%;
    height: 50px;
    border-bottom: 1px solid rgb(202, 202, 202);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  /* 用户详情头部标题样式 */
  .user-info-header-title {

  }
  /* 用户详情头部关闭按钮样式 */
  .user-info-header-close-btn {
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }


  /* 用户详情内容与logo大图浮动处理盒子基础样式 */
  .content-logo-float-basic {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-items: normal;
  }


  /* 用户详情内容最外层盒子基本样式 */
  .user-info-content-basic {
    width: 380px;
    overflow: hidden;
    margin: 20px 0;
  }

  /* 用户详情内容头像最外层盒子样式 */
  .user-info-content-avatar {
    overflow: hidden;
    display: flex;
    align-items: center;
  }
  /* 用户详情内容文字头像样式 */
  .user-info-content-avatar-text {
    border-radius: 50px;
    width: 80px;
    height: 80px;
    border: 1px solid rgb(202, 202, 202);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(246, 246, 246);
  }
  /* 用户详情内容图片头像样式 */
  .user-info-content-avatar-image {
    border-radius: 50px;
    width: 80px;
    height: 80px;
    border: 1px solid rgb(202, 202, 202);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  /* 用户详情内容图片头像大小样式 */
  .user-info-content-avatar-image>img {
    width: 120%;
    height: auto;
  }


  /* 用户详情内容昵称最外层盒子样式 */
  .user-info-content-nickname {
    padding: 0 0 0 15px;
    color: rgb(58, 58, 58);
  }
  /* 用户详情内容昵称文字样式 */
  .user-info-content-nickname-text {
    height: 30px;
    display: flex;
    align-items: center;
  }
  /* 用户详情内容用户id样式 */
  .user-info-content-nickname-id {
    height: 30px;
    display: flex;
    align-items: center;
  }


  /* 用户详情内容最外层盒子 */
  .user-info-body-basic {
    width: 320px;
    padding: 16px 0 0 0;
  }

  /* 用户详情内容项基本样式 */
  .user-info-body-item-basic {
    height: 30px;
    display: flex;
    align-items: center;
  }

  /* 用户详情内容项图标样式 */
  .user-info-body-item-icon {
    font-size: 18px;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* 用户详情内容项标题样式 */
  .user-info-body-item-title {
    font-size: 15px;
  }

  /* 用户详情内容项内容样式 */
  .user-info-body-item-content {
    font-size: 15px;
  }
  /* 当内容为空时 */
  .user-info-body-item-content-null {
    font-size: 15px;
  }
  .user-info-body-item-content-null a {
    color: #409eff;
  }

  /* 用户详情内容项文本链接样式 */
  .user-info-body-item-text-link {
    cursor: pointer;
    text-decoration: underline;
    transition: all .2s;
  }

  /* 用户详情内容项文本链接样式 */
  .user-info-body-item-text-link:hover {
    color: #409eff;
  }


  /* 用户详情 logo 大图最外层盒子基础样式 */
  .user-info-logo-basic {
    width: 420px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* 用户详情 logo 大图大小样式 */
  .user-info-logo-basic>img {
    width: 80%;
  }


  .animationShowStyle {
    animation-name: animationShow;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
  }
  @keyframes animationShow {
    0% {
      opacity: 0;
      transform: scale(0.3);
    }
    50% {
      opacity: 0.5;
      transform: scale(1.3);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }

</style>